<template>
  <view class="store-list">
    <!-- 商店列表 -->
    <view v-for="store in storeList" :key="store.id" class="store-item" @click="selectStore(store)">
      <view class="left-icon">
        <wd-icon name="shop" size="40rpx" color="#0066FF"></wd-icon>
      </view>
      <view class="store-content">
        <view class="store-header">
          <text class="store-name">{{ store.name }}</text>
          <wd-tag type="primary" size="small">营业中</wd-tag>
        </view>
        <view class="store-address">
          <wd-icon name="location" size="28rpx" color="#666" custom-style="margin-right: 6rpx;"></wd-icon>
          <text>{{ store.province + store.city + store.district + store.street + store.address }}</text>
        </view>
        <view class="store-info">
          <view class="info-item">
            <wd-icon name="phone" size="28rpx" color="#666" custom-style="margin-right: 6rpx;"></wd-icon>
            <text>{{ store.contactPhone }}</text>
          </view>
          <view class="info-item">
            <wd-icon name="time" size="28rpx" color="#666" custom-style="margin-right: 6rpx;"></wd-icon>
            <text>{{ store.openingHours }}</text>
          </view>
        </view>
      </view>
      <wd-icon name="arrow-right" size="32rpx" color="#999"></wd-icon>
    </view>

    <!-- 加载更多 -->
    <wd-loadmore v-if="total > 0" :loading="loading" @loadmore="loadMore">
      {{ hasMore ? '加载中...' : '没有更多了' }}
    </wd-loadmore>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getStoreList } from '@/api/store'

const storeList = ref([])
const current = ref(1)
const size = ref(10)
const total = ref(0)
const loading = ref(false)
const hasMore = ref(true)

// 获取商店列表
const getStores = async () => {
  loading.value = true
  try {
    const res = await getStoreList({
      current: current.value,
      size: size.value
    })

    if (current.value === 1) {
      storeList.value = res.records
    } else {
      storeList.value.push(...res.records)
    }

    total.value = res.total
    hasMore.value = storeList.value.length < total.value
  } catch (e) {
    console.error(e)
  } finally {
    loading.value = false
  }
}

// 加载更多
const loadMore = () => {
  if (!hasMore.value || loading.value) return
  current.value++
  getStores()
}

const selectStore = (store) => {
  // 格式化商店数据
  const formattedStore = {
    id: store.id,
    name: store.name,
    fullAddress: store.province + store.city + store.district + store.street + store.address,
    phone: store.contactPhone,
    openingHours: store.openingHours
  }
  console.log(formattedStore)
  uni.$emit('updateStore', formattedStore)
  uni.navigateBack()
}

onMounted(() => {
  getStores()
})
</script>

<style lang="scss">
.store-list {
  min-height: 100vh;
  background: #f8f8f8;
  padding: 20rpx;

  .store-item {
    background: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
    display: flex;
    align-items: flex-start;

    .left-icon {
      margin-right: 24rpx;
      padding-top: 6rpx;
    }

    .store-content {
      flex: 1;
      margin-right: 20rpx;

      .store-header {
        display: flex;
        align-items: center;
        margin-bottom: 16rpx;

        .store-name {
          font-size: 32rpx;
          color: #333;
          font-weight: 500;
          margin-right: 12rpx;
        }
      }

      .store-address {
        display: flex;
        align-items: flex-start;
        font-size: 26rpx;
        color: #666;
        margin-bottom: 16rpx;
        line-height: 1.4;
      }

      .store-info {
        display: flex;
        flex-direction: column;
        gap: 8rpx;

        .info-item {
          display: flex;
          align-items: center;
          font-size: 26rpx;
          color: #666;
        }
      }
    }
  }
}
</style>